/**
@mixin混入：
    - 1.mixin是可以重复使用的一组css声明
    - 2.mixin有助于减少重复代码，只需声明一次，就可在文件中引入
    - 3.混合指令可以包含所有的css规则，绝大部分sass规则，甚至通过参数功能引入变量，输出多样化的样式
    - 4.使用参数时建议加上默认值
*/

//1.标准形式：定义页面中区块基础的样式
@mixin block {
    width: 100%;
    margin-left: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

//使用混入
.container {
    @include block();
}

//2.嵌入选择器
@mixin warning-text {
    .warn-text {
        font-size: 20px;
        color: red;
        line-height: 40px;
    }
}

.container2 {
    @include warning-text();
}

//3.使用变量
@mixin flex-align($aitem) {
    display: flex;
    align-items: $aitem;
    justify-content: $aitem;
}

.container3 {
    // @include flex-align(center);
    @include flex-align($aitem: center)
}

//4.使用变量（多参数）
@mixin block-padding($top, $bottom, $left, $right) {
    padding-top: $top;
    padding-bottom: $bottom;
    padding-left: $left;
    padding-right: $right;
}

.container4 {
    // @include block-padding(10px, 20px, 30px, 40px);
    @include block-padding($top: 10px, $bottom:20px, $left:30px, $right:40px);
}

//5.指定默认参数
@mixin block-padding2($left:0px, $right:0px, $top:0px, $bottom:0px) {
    padding-top: $top;
    padding-bottom: $bottom;
    padding-left: $left;
    padding-right: $right;
}

.container5 {
    @include block-padding2($left: 20px, $top:20px);
}

//6.可变参数
@mixin linear-gradient($direction, $gradients...) {
    // nth取出map中的第一个值
    background-color: nth($gradients, 1);
    background-image: linear-gradient($direction, $gradients);
}

.container6 {
    @include linear-gradient(to right, red, green, blue);
}